body {
  background: #f8f9fa;
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  $filter: brightness(1) contrast(1) hue-rotate(0deg) invert(0%); 
  -webkit-filter: $filter;
  filter: $filter;
}

#map {
  // Filters for satellite view
  // Grayscale version
  //$filter: grayscale(100%) brightness(0.9) contrast(1.3);
  // Rich colors version (fake colors)
  //$filter: brightness(0.9) contrast(1.3) hue-rotate(67.5deg) invert(12.5%); 
  //-webkit-filter: $filter;
  //filter: $filter;
  height: 120vh;
  left: -10vw;
  position: absolute;
  top: -10vh;
  width: 120vw;
  z-index: 0;
}

.map-overlay {
  color: white;
  font: 12px/20px "Open Sans Bold", 'Helvetica Neue', Arial, Helvetica, sans-serif;
  position: absolute;
  width: 20vw;
  bottom: 2.5vh;
  right: 2.5vw;
  text-transform: uppercase;
  padding: 0;
  z-index: 1;
}

.map-overlay .map-overlay-inner {
  padding: 0;
}

.map-overlay .legend .bar {
    height: 10px;
  display: inline-block;
}

.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0 0 1.5em 0;
    cursor: ew-resize;
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  height: 0.5vh;
  left: 0;
  position: absolute;
  bottom: 0;
  width: 100vw;
  z-index: 2;
}

progress::-webkit-progress-bar {
  background: rgba(0, 0, 0, 0.5);
}

progress::-webkit-progress-value {
  background: rgba(255, 255, 255, 0.5);
}
